<template>
  <!-- to用来设置router-link被点击时跳转的路由链接 -->
  <!-- 开发中如果直接给自定义组件添加class,style属性，这些class,style属性会直接绑定给自定义组件模板种最外层的标签 -->
  <!-- <router-link :to="path" style="text-decoration:none;text-align:center">
    <div @click=clickAction>
      <i class="iconfont" :class="className"></i>
      <div class="txt">{{title}}</div>
    </div>
  </router-link> -->
  <!-- <van-button type="default" :replace="true" :to="path" @click=clickAction > -->
  <van-button type="default" :replace="true" :to="path" @click=clickAction>
    <i class="iconfont" :class="className"></i>
    <div class="txt">{{title}}</div>
  </van-button>
</template>

<script>
  export default {
    name: "TabBarItem",
    props: ["className", "title", "path"],
    methods: {
      clickAction() {
        this.$emit('changeIndex');
      },
    },
  };
</script>

<style lang="less" scoped>
  .iconfont {
    font-size: 20px;
    /*no */
  }

  .normal {
    color: #ccc;
  }

  .select {
    color: #7dc5eb;
  }

  .van-button {
    background-color: rgba(0, 0, 0, 0);
  }

  .van-button:active::before {
    opacity: 0;
  }
</style>